<template>
  <div class="commentBox">
    <div class="userinfobar">
      <div class="situation1" v-if="comment.fuser == null">
        <img src="" alt="" />
        <p class="username">{{ comment.user.username }}</p>
        <p class="publishtime">{{ comment.publishtime }}</p>
      </div>
      <div class="situation2" v-if="comment.fuser != null">
        <img src="" alt="" />
        <p class="username">{{ comment.user.username }}</p>
        <font color="green">回复</font>
        <img src="" alt="" />
        <p class="username" v-if="comment.fuser != null">
          {{ comment.fuser.username }}
        </p>
        <p class="publishtime">{{ comment.publishtime }}</p>
      </div>
    </div>
    <div class="commenttext" :class="{ isReply: comment.isReply }">
      {{ comment.content }}
    </div>
       <div
      class="showreplybtn"
      v-show="showAllReply == false"
      @click="showRestReply()"
    >
      查看剩余回复
    </div>
    <div class="opbutton">
      <el-button
        :type="thumbuped"
        size="small"
        icon="el-icon-star-off"
        circle
        @click="thumbup()"
      ></el-button>
      <el-button
        type="primary"
        size="small"
        icon="el-icon-edit"
        circle
        @click="showReplyArea()"
      ></el-button>
      <el-button
        type="danger"
        size="small"
        icon="el-icon-delete"
        circle
        @click="dodel()"
      ></el-button>
    </div>
    <div class="replyArea" v-for="item in reply">
      <Comment :commentdata="item"></Comment>
      <el-pagination
        v-show="showAllReply == true"
        layout="prev, pager, next"
        :total="pageTotal"
      >
      </el-pagination>
    </div>
    
    <div class="replyTextArea" v-show="showReplyAreaSwitch == true">
      <el-input
        type="textarea"
        v-model="replyVo.content"
        placeholder="进行回复"
      ></el-input>
      <el-button type="primary" @click="doReply()">回复</el-button>
    </div>
  </div>
</template>

<script>
import { loadReplies, del, add, thumbuping } from "../api/comment/comment";
export default {
  components: {
    Comment,
  },
  name: "Comment",
  props: ["commentdata"],
  data() {
    return {
      comment: {},
      showAllReply: false,
      reply: [],
      replyVo: {},
      showReplyAreaSwitch: false,
      thumbuped:'warning',
      pageTotal:20
    };
  },
  methods: {
    showRestReply() {
      this.showAllReply = true;
      this.loadReply(this.comment._id, 1, 10);
    },
    closeReply() {
      this.showAllReply = false;
    },
    loadReply(pid, pageNo, pageSize) {
      loadReplies(pid, pageNo, pageSize).then((res) => {
        if (res.flag) {
          this.reply = res.data.result;
          this.pageTotal=res.data.recordTotal;
        }
      });
    },
    doReply() {
    if(this.$store.getters.token == null || this.$store.getters.token == "" || this.$store.getters.token== undefined){
      this.$message.info("请先登录")
      return 
    }
      add(this.replyVo).then((res) => {
        if (res.flag) {
          this.$message({
            type: "success",
            message: "回复成功",
          });
          this.showReplyAreaSwitch = false;
        }
      });
    },
    showReplyArea() {
      this.replyVo.parentid=this.comment._id;
      this.replyVo.bid=this.comment.bid;
      this.showReplyAreaSwitch = true;
    },
    dodel(){
    del(this.comment._id).then((res)=>{
      if(res.flag){
        this.loadReply(this.comment._id, 1, 3)
      }
    })
    },
    thumbup(){
      thumbuping(this.comment._id).then((res)=>{
        if(res.flag){
             this.thumbuped = 'primary'
        }
      })
    }
  },
  created() {
    this.comment = this.commentdata;
    this.loadReply(this.commentdata._id, 1, 3);
  },
};
</script>

<style scoped>
.replyArea{
  
}
.commentBox {
  margin-top: 10px;
}
.situation1 {
  padding-left: 10px;
}
.situation2 {
  padding-left: 30px;
}
.username {
  color: palevioletred;
  display: inline-block;
  margin-right: 10px;
}
.publishtime {
  display: inline-block;
}
.commenttext {
  padding-left: 25px;
  margin-top: 10px;
}
.opbutton {
  text-align: right;
  margin-top: 20px;
  margin-right: 10%;
}
.showreplybtn {
  margin-left: 15%;
  font-size: 14px;
  color: purple;
  display: block;
  cursor: pointer;
}
.isReply {
  padding-left: 45px;
}
.replyTextArea {
  display: flex;
}
</style>
